import React, { useState } from "react";
import "./app.scss";
const Son1 = React.lazy(() => import("./Son1"));
const Son2 = React.lazy(() => import("./Son2"));
const Son3 = React.lazy(() => import("./Son3"));
const App = () => {
  const [list] = useState(["推荐", "后端", "前端"]);
  const [num, setNum] = useState(0);
  const setState = (index) => {
    let _num = index;
    setNum(_num);
  };
  return (
    <div className="box">
      <header>
        <nav>
          <ul>
            {list.map((item, index) => {
              return (
                <li key={index} onClick={() => setState(index)}>
                  {item}
                </li>
              );
            })}
          </ul>
        </nav>
      </header>
      <main>
        {num === 0 ? (
          <React.Suspense fallback={<h1>loaing...</h1>}>
            <Son1></Son1>
          </React.Suspense>
        ) : (
          ""
        )}
        {num === 1 ? (
          <React.Suspense fallback={<h1>loading...</h1>}>
            <Son2></Son2>
          </React.Suspense>
        ) : (
          ""
        )}
        {num === 2 ? (
          <React.Suspense fallback={<h1>loading...</h1>}>
            <Son3></Son3>
          </React.Suspense>
        ) : (
          ""
        )}
      </main>
    </div>
  );
};
export default App;
